<template>
  <div class="search-panel-wrapper">
    <div class="header">
      【订单信息】
    </div>
    <div class="main">
      <div class="row">
        <span class="info-key">服务大类：</span>
        <el-input
          size="mini"
          class="input-25"
          v-model="mainServiceType"
        ></el-input>

        <span class="info-key margin-left">服务小类：</span>
        <el-input
          size="mini"
          class="input-25"
          v-model="subServiceType"
        ></el-input>
      </div>

      <div class="row">
        <span class="info-key">服务内容：</span>
        <el-input
          size="mini"
          class="input-50"
          v-model="serviceContent"
        ></el-input>
      </div>

      <div class="row">
        <span class="info-key">服务时间：</span>
        <el-input size="mini" class="input-25" v-model="serviceTime"></el-input>
      </div>

      <div class="row">
        <span class="info-key">客户地址：</span>
        <el-input size="mini" class="input-75" v-model="userAddress"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import props from './props';
import data from './data';
import lifecircle from './lifecircle';
import methods from './methods';
export default {
  name: 'OrderInfo',
  props,
  data,
  ...lifecircle,
  methods
};
</script>

<style scoped lang="less">
.search-panel-wrapper {
  width: 400px;
  height: 180px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;

  box-shadow: 0 2px 10px #888888;

  .header {
    box-sizing: border-box;
    padding: 0 5px;
    width: 100%;
    height: 25px;

    background-color: #538cc7;
    color: white;
    font-size: 14px;
    line-height: 25px;
  }

  .main {
    width: 100%;
    flex-grow: 1;

    .row {
      margin: 8px 5% 0 5%;
      width: 90%;
      display: flex;
      align-items: center;
      .info-key {
        color: #333;
        font-size: 14px;
      }
      .margin-left {
        margin-left: 15px;
      }
      .input-25 {
        width: 25%;
      }
      .input-50 {
        width: 50%;
      }
      .input-75 {
        width: 75%;
      }
    }
  }
}
</style>
